
/**
 * Created by chocolate on 16/5/4.
 */
import React, {
    Component,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    ScrollView,
    Image,
    Modal,
} from 'react-native';

var UsrLogin = require('./Login');
var PopOption = require('./PopOption');
var ENTER_ARROW = require('../../icon/enter-arrow.png');

class MySetting extends Component{
  constructor(props){
      super(props);
      this.state={
        avatarSource:g_avatar,
        modalVisible:false,
        showOption:'none',
      }
  }

  /**
  *修改个人资料--修改图片之后，需要通过
  *这个回调函数刷新 "设置 界面的小头像
  **/
  updateAvarta(){
    this.setState({avatarSource:g_avatar});
  }

  _onClearCache(){
    storage.clearMapForKey('course');
    storage.clearMapForKey('chat');
    storage.remove({key:'user'});
    console.log('缓存数据清除成功');
  }
  /**
   * 点击Item时的相应函数
   * @param row
   * @private
   */
  _onPressRow(row){
    if(row === 0){
      this.props.navigator.push({name:'ChoosePhoto',params:{user:this.props.user,onChangePhoto:this.updateAvarta.bind(this)}});  
    }
    else if(row === 2){
      this.props.navigator.push({name:'ModifyPwd',params:{user:this.props.user}});
    }
    else if(row === 3){
      this.props.navigator.push({name:'NotifySetting'});
    }
    else if(row === 4){
    }
    else if(row === 5){
      this.setState({modalVisible:true});
      this.setState({showOption:'clearCache'});
    }
    else if(row === 7){
       this.props.navigator.push({name:'About'});
    }
  }

  componentWillMount(){
  }

  _showClearCacheOpt(){
    return(
      <View style={{marginLeft:10,marginRight:10}}>
        <TouchableOpacity style={{height:100,borderRadius:10,backgroundColor:'#FFF'}} onPress={()=>{this._onClearCache();this.setState({modalVisible: false});}}>
          <Text style={{color:'#656565',fontSize:12,marginTop:15,textAlign:'center'}}>确定删除所有缓存?离线内容及图片均会被清除</Text>
          <View style={{borderStyle:'solid',borderWidth:1,borderColor:'#eeeeee',marginTop:15}}/>
          <Text style={{color:'#06a9fe',fontSize:20,marginTop:20,textAlign:'center'}}>确定</Text>
        </TouchableOpacity>

        <TouchableOpacity style={{height:60,borderRadius:10,backgroundColor:'#FFF',marginTop:8,marginBottom:10}} onPress={()=>{this.setState({modalVisible: false})}}>
          <Text style={{color:'#06a9fe',fontSize:20,marginTop:20,textAlign:'center'}}>取消</Text>
        </TouchableOpacity>

      </View>
    )
  }

  _showQuitOption(){
    return(
      <View style={{marginLeft:10,marginRight:10}}>
        <TouchableOpacity style={{height:100,borderRadius:10,backgroundColor:'#FFF'}} onPress={()=>{this.props.navigator.push({name:'login'});this.setState({modalVisible: false});}}>
          <Text style={{color:'#656565',fontSize:12,marginTop:15,textAlign:'center'}}>退出后不会删除任何历史数据，下次登录依然可以使用本账号</Text>
          <View style={{borderStyle:'solid',borderWidth:1,borderColor:'#eeeeee',marginTop:15}}/>
          <Text style={{color:'#06a9fe',fontSize:20,marginTop:20,textAlign:'center'}}>退出登录</Text>
        </TouchableOpacity>

        <TouchableOpacity style={{height:60,borderRadius:10,backgroundColor:'#FFF',marginTop:8,marginBottom:10}} onPress={()=>{this.setState({modalVisible: false})}}>
          <Text style={{color:'#06a9fe',fontSize:20,marginTop:20,textAlign:'center'}}>取消</Text>
        </TouchableOpacity>

      </View>
    )
  }

  _onPressQuitBtn(){
    this.setState({modalVisible:true});
    this.setState({showOption:'quitToLogin'});
  }

  render(){

    var popOption = null;
    if(this.state.showOption==='clearCache' && this.state.modalVisible){
      popOption = 
              <PopOption renderOptions={this._showClearCacheOpt.bind(this)}
                visible = {this.state.modalVisible} 
                onClose={()=>{this.setState({modalVisible:false})}}/>;
    }
    else if(this.state.showOption === 'quitToLogin' && this.state.modalVisible){
      popOption = 
              <PopOption renderOptions={this._showQuitOption.bind(this)}
                visible = {this.state.modalVisible} 
                onClose={()=>{this.setState({modalVisible:false})}}/>;
    }

    return(
      <View style={styles.container}>

        {popOption}

        <View style={{backgroundColor:'#2981b1',height:20}}/>

        <TouchableOpacity style={[{flexDirection:'row',alignItems:'center',marginTop:0,height:120,backgroundColor:'#FFF'}]} onPress = {()=>{this._onPressRow(0)}}>
          <View style={{flex:1,alignSelf:'stretch',marginLeft:26,alignItems:'center',justifyContent:'space-around'}}>
            <Text style={{color:'#06a9fe',fontSize:16,marginTop:10}}>{this.props.user.name}</Text>
            <Image style={{height:60,width:60,borderRadius:30}} source={this.state.avatarSource}/>
            <Text style={{color:'#bbbbbb',fontSize:16,marginBottom:10}}>编辑个人资料</Text>
          </View>
          <Image style={styles.enterIcon} source={ENTER_ARROW} />
        </TouchableOpacity>

         <TouchableOpacity style={styles.row} onPress = {()=>{this._onPressRow(2)}}>
          <View style={styles.titleContainer}>
            <Image style={styles.thumb} source={require('../../icon/modify-pwd.png')} />
            <Text style={styles.text}>修改密码</Text>
          </View>
          <Image style={styles.enterIcon} source={ENTER_ARROW} />
        </TouchableOpacity>

         <TouchableOpacity style={[styles.row,{marginTop:1}]} onPress = {()=>{this._onPressRow(3)}}>
          <View style={styles.titleContainer}>
            <Image style={styles.thumb} source={require('../../icon/notifier.png')} />
            <Text style={styles.text}>通知提醒</Text>
          </View>
          <Image style={styles.enterIcon} source={ENTER_ARROW} />
        </TouchableOpacity>

         <TouchableOpacity style={styles.row} onPress = {()=>{this._onPressRow(4)}}>
          <View style={styles.titleContainer}>
            <Image style={styles.thumb} source={require('../../icon/share.png')} />
            <Text style={styles.text}>应用分享</Text>
          </View>
          <Image style={styles.enterIcon} source={ENTER_ARROW} />
        </TouchableOpacity>

        <TouchableOpacity style={[styles.row,{marginTop:1}]} onPress = {()=>{this._onPressRow(5)}}>
          <View style={styles.titleContainer}>
            <Image style={styles.thumb} source={require('../../icon/clear-cache.png')} />
            <Text style={styles.text}>清除缓存</Text>
          </View>
          <Image style={styles.enterIcon} source={ENTER_ARROW} />
        </TouchableOpacity>

        <TouchableOpacity style={[styles.row,{marginTop:1}]} onPress = {()=>{this._onPressRow(6)}}>
          <View style={styles.titleContainer}>
            <Image style={styles.thumb} source={require('../../icon/disclaimer.png')} />
            <Text style={styles.text}>免责声明</Text>
          </View>
          <Image style={styles.enterIcon} source={ENTER_ARROW} />
        </TouchableOpacity>

        <TouchableOpacity style={[styles.row,{marginTop:1}]} onPress = {()=>{this._onPressRow(7)}}>
          <View style={styles.titleContainer}>
            <Image style={styles.thumb} source={require('../../icon/about.png')} />
            <Text style={styles.text}>关于抱抱网</Text>
          </View>
          <Image style={styles.enterIcon} source={ENTER_ARROW} />
        </TouchableOpacity>

        
        <TouchableOpacity style={styles.quitButton} onPress={this._onPressQuitBtn.bind(this)}>
          <Text style={styles.quitButtonText}>退出登录</Text>
        </TouchableOpacity>

      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
      backgroundColor: '#eeeeee',
      flex: 1,
  },
  modalContainer:{
    flex: 1,
    backgroundColor:'rgba(0, 0, 0, 0.5)',
    justifyContent:'flex-end',
  },
  row:{
    flexDirection: 'row',
    backgroundColor:'#FFF',
    height:55,
    justifyContent: 'space-between',
    alignItems:'center',
    marginTop:7,
  },
  titleContainer:{
    marginLeft:26,
    flexDirection: 'row',
    alignItems:'center',
    justifyContent: 'flex-start',
  },
  text:{
      marginLeft:16,
      fontSize:16,
      color:'#04679b',
  },
  thumb: {
  },
  enterIcon: {
    marginRight:26,
  },
  quitButton:{
    height:40,
    backgroundColor:'#FFF',
    borderRadius:6,
    borderStyle:'solid',
    borderWidth:1,
    borderColor:'#06a9fe',
    justifyContent:'center', 
    marginTop:15,
    marginLeft:80,
    marginRight:80,
  },
  quitButtonText:{
    fontSize:16,
    textAlign:'center', //内容水平方向居中
    color:'#06a9fe'
  },
})

module.exports = MySetting;